<template>
  <div class="app-container">
    <span v-if="longName.length < 12">
      {{ longName }}
    </span>
    <template v-else>
      <el-popover placement="top-start" :width="200" trigger="hover" :content="longName">
        <template #reference>
          <span>
            {{ longName.substring(0, 11) }}
            <span>...</span>
          </span>
        </template>
      </el-popover>
    </template>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  longName: {
    type: String,
    default: ''
  }
})

</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  padding: 0;
}

</style>